<template>
    <div class="desgin">
        <div class="button__wrapper">
            <div class="button">
                保存
            </div>
        </div>
        <div class="canvas" id="canvasBox">
            <web-view style="width: 100%;height: 500px" src="https://www.baidu.com/"></web-view>
        </div>
        <div class="tool">
            <div class="undo-box">
                <img class="undo-left" src="../../static/image/undo-left.png" alt="">
                <img class="undo-right" src="../../static/image/undo-right.png" alt="">
            </div>
            <div class="func-box">
                <div
                    v-for="item in funcList"
                    :key="item.id"
                    :class="['func-item', item.id === currentActiveFunc ? 'active' : '']"
                    @click="handleChangeFunc(item)">
                    <img :src="item.id === currentActiveFunc ? item.select_img : item.img" alt="">
                    <p>{{ item.mame }}</p>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
export default {
    name: "desgin",
    data() {
        return {
            currentActiveFunc: '1',
            funcList: [
                {
                    id: '1',
                    mame: '一键清除',
                    img: '../../static/image/clear.png',
                    select_img: '../../static/image/clear_active.png'
                },
                {
                    id: '2',
                    mame: '素材',
                    img: '../../static/image/sucai.png',
                    select_img: '../../static/image/sucai_active.png'
                },
                {
                    id: '3',
                    mame: '照片上传',
                    img: '../../static/image/upload_img.png',
                    select_img: '../../static/image/upload_img_active.png'
                },
                {
                    id: '4',
                    mame: '文字',
                    img: '../../static/image/text.png',
                    select_img: '../../static/image/text_active.png'
                }
            ],
            canvas: null
        }
    },
    methods: {
        handleChangeFunc(item) {
            this.currentActiveFunc = item.id
            switch (item.id) {
                case '1':
                    break
                case '2':
                    break
                case '3':
                    break
                case '4':
                    break
                
            }
        }
    }
}
</script>

<style lang="less">
.desgin {
    background-color: #FBFBFB;
    #canvasItem {
        width: 100%;
        height: 100%
    }
    .button__wrapper {
        padding: 16px;
        display: flex;
        justify-content: flex-end;
        margin-bottom: 8px;
    }
    .button {
        width: 52px;
        height: 30px;
        background: #303030;
        border-radius: 15px;
        text-align: center;
        font-size: 12px;
        font-family: PingFangSC-Regular, PingFang SC;
        font-weight: 400;
        color: #FFFFFF;
        line-height: 30px;
    }
    .canvas {
        padding: 16px;
        width: 100%;
        height: 455px;
        border-radius: 4px;
        overflow: hidden;
    }
    .tool {
        background-color: #FFFFFF;
        padding: 10px 18px;
        .undo-box {
            margin-bottom: 30px;
            img {
                width: 20px;
                height: 20px;
                margin-right: 26px;
            }
        }
        .func-box {
            display: flex;
            align-items: center;
            padding-bottom: 58px;
            .func-item {
                border-radius: 4px;
                width: 78px;
                height: 80px;
                display: flex;
                flex-direction: column;
                justify-content: center;
                align-items: center;
                font-size: 12px;
                font-family: PingFangSC-Regular, PingFang SC;
                font-weight: 400;
                line-height: 17px;
                img {
                    width: 19px;
                    height: 19px;
                    margin-bottom: 7px;
                }
                &.active {
                    color: #00C65A;
                    background: rgba(0, 198, 90, 0.08);
                }
            }
        }
    }
}

</style>